<template>
  <view class="coupon_get">
    <view class="top" v-if="couponList.length != 0">
      <view class="fixed">
        <view class="top_left">
          <view class="title">可领取的优惠劵</view>
          <view class="tip">
            <text class="icon"></text>
            一次最多可领取 {{ computedGiveLimit }} 张优惠券
          </view>
        </view>
        <view class="top_right">
          <view class="button" @click="getAllCoupon">一键领取</view>
        </view>
      </view>
    </view>
    <view class="center">
      <template v-if="!showTip">
        <template v-if="couponList.length != 0">
          <view
            class="coupon"
            :class="[
              ele.couponType == 1 ? 'direct' : '',
              ele.couponType == 2 ? 'rate' : '',
              ele.couponType == 3 ? 'exchange' : '',
              ele.couDrawStatus == '1' ? 'expired' : '',
            ]"
            v-for="ele in couponList"
            :key="ele.couponTemplateId"
          >
            <view class="left">
              <view
                class="amount"
                v-if="ele.couponType == 1 "
              >
                ￥
                <text class="value">{{ ele.couponAmt }}</text>
              </view>
              <view
                class="amount"
                v-if="ele.couponType == 2"
              >
                <text class="value">{{ ele.couponAmt }}</text>
                %
              </view>
              <view class="condition">
                {{
                  ele.minUseCouponAmt == 0
                    ? "无门槛"
                    : "满" + ele.minUseCouponAmt + "元可用"
                }}
              </view>
              <view class="exchangeName">{{ ele.couponName }}</view>
            </view>
            <view class="right">
              <view class="title">
                <text class="type"
                  >{{ ele.couponType == 1 ? "立减劵" : ""
                  }}{{ ele.couponType == 2 ? "折扣劵" : ""
                  }}{{ ele.couponType == 3 ? "兑换劵" : "" }}
                </text>
                <text class="state">
                  {{ ele.couDrawStatus == 0 ? "可尝试领取" : "" }}
                  {{ ele.couDrawStatus == 1 ? "已领取" : "" }}
                  {{ ele.couDrawStatus == 2 ? "领取失败" : "" }}
                </text>
              </view>
              <view class="content">
                <view class="items">
                  <view class="item valid">
                    截止：<text>{{
                      (ele.effectiveTimeType == 1
                        ? (ele.effectiveTimeEnd || "").replace(
                            /\s{1,}\S{8,8}/,
                            ""
                          )
                        : "") +
                      (ele.effectiveTimeType == 2
                        ? "领取后" + ele.effectiveDayNum + "天有效"
                        : "")
                    }}</text>
                  </view>
                  <view class="item from">来源：<text>加油活动</text></view>
                </view>
                <view class="btn">
                  <view class="button" @click="getCoupon([ele.couponTemplateId])">
                    领取
                  </view>
                </view>
              </view>
              <view class="tip">
                {{
                  !!ele.couponDetails
                    ? ele.couponDetails
                    : "使用此劵更优惠~更多活动，请关注我们的公众号！"
                }}
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view style="text-align: center">当前活动里没有可有优惠券~</view>
        </template>
      </template>
      <template v-else>
        <view style="text-align: center">{{ tip }}</view>
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  head() {
    return {
      title: "领取优惠券",
    };
  },
  data() {
    return {
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
      couponList: [],
      couponListInfo: {},
      giveLimit: 0, // 单次可领取的张数
      showTip: true,
      tip: "loading...",
      notClaimedCouponList: [], // 未尝试领取
      successCouponList: [], //领取成功的
      couponHoldNumMaxList: [], // 持有超额
      couponNumNEList: [], //优惠券数量不足
      couponReceiveNumList: [], //累计持有超额
      drawTemList: [],
      unDrawTemList: [],
      randomFlag: "",
    };
  },
  computed: {
    userInfo() {
      return {};
    },
    computedGiveLimit() {
      if (this.couponListInfo.giveLimit > this.couponList.length) {
        return this.couponList.length;
      }
      return this.couponListInfo.giveLimit;
    },
  },
  filters: {},
  components: {},
  created() {
    this.getCouponList();
  },

  methods: {
    translationOilListToNameList(oilArr) {
      if (!oilArr || oilArr.length == 0) {
        return "无适用油品";
      }
      let nameStr = "";
      oilArr.forEach((ele) => {
        nameStr += ele.oilName;
        nameStr += ",";
      });
      return nameStr.replace(/,$/, "");
    },
    getAllCoupon() {
      const arr = [];
      this.couponList.map((ele) => {
        if (!ele.showStatus && ele.showStatus !== 0) {
          arr.push(ele.couponTemplateId);
        }
        return ele;
      });
      if (arr.length > this.computedGiveLimit) {
        arr.length = this.computedGiveLimit;
      }
      this.getCoupon(arr);
    },
    async getCouponList() {
      // if(!this.$store.state.parse.issueId){
      //   alert("此页面不支持直接访问")
      //   return;
      // }
      this.showTip = true;
      this.tip = "loading...";
      try {
        const res = await this.$Request({
          url: "/selectCouponListByCouponIssueId",
          method: "GET",
          data: {couponIssueId: '8692225252014137'}
        });
        if (res.retCode == 0) {
          this.showTip = false;
          this.couponListInfo = res.data;
          this.couponList = res.data.couponTemplateList;
          this.randomFlag = res.data.randomFlag;

          if (!this.couponList) {
            this.couponList = [];
          }
        }else {
          this.tip = res.message;
          throw new Error(res.message);
        }
      } catch (error) {
				uni.showToast({
					title: error,
					icon: 'fail',
				});
      }
    },
    async getCoupon(arr) {
      try {
        const res = await this.$Request({
          url: "/drawCoupons",
          method: "POST",
          data: {
            mobilePhone: this.phoneNumber,
            couTemIds: arr.toString(),
            randomFlag: this.randomFlag,
            couponIssueId: '8692225252014137',
          }
        });
        if (res.retCode == 0) {
          this.showTip = false;
          this.couponListInfo.couponTemplateList = res.data;
          this.couponList = this.couponListInfo.couponTemplateList;
          this.couponListInfo = { ...this.couponListInfo };
          if (!this.couponList) {
            this.couponList = [];
          }
        } else {
          uni.showModal({
          content: res.message,
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              // console.log('用户点击确定');
            }
          }
        });
        }
      } catch (error) {
				uni.showToast({
					title: error,
					icon: 'error',
				});
      }
    },
  },
};
</script>

<style lang="scss">
.coupon_get {
  width: 750rpx;
  background: #ffffff;
  padding: 0 30rpx 0 30rpx;
  box-sizing: border-box;
  min-height: 100vh;

  > .top {
    width: 690rpx;
    height: 150rpx;

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 750rpx;
      height: 150rpx;
      padding: 0 30rpx 0 30rpx;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      justify-content: space-between;

      .top_left {
        > .title {
          height: 40rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.5);
          line-height: 40rpx;
          letter-spacing: 1px;
          margin-top: 30rpx;
        }
        > .tip {
          height: 28rpx;
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #ff5c5a;
          line-height: 28rpx;
          margin-top: 10rpx;
          > .icon {
            background: url("../static/coupon/tishi.2x.png") no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            width: 22rpx;
            height: 21rpx;
          }
        }
      }
      .top_right {
        width: 190rpx;
        margin-top: 38rpx;

        > .button {
          text-align: center;
          width: 190rpx;
          height: 60rpx;
          background: #23a97d;
          border-radius: 30rpx;
          outline: none;
          border: none;
          font-weight: 600;
          color: #ffffff;
          font-size: 26rpx;
          letter-spacing: 1px;
          line-height: 60rpx;
        }
      }
    }
  }
  > .center {
    .coupon {
      display: flex;
      justify-content: space-between;
      height: 250rpx;
      margin-bottom: 30rpx;
      box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(233, 223, 223, 0.5);
      > .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 220rpx;
        height: 250rpx;
        text-align: center;

        .amount {
          display: block;
          font-size: 40rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 56rpx;
          text-align: center;
          margin-top: 0rpx;
          .value {
            font-size: 60rpx;
          }
        }
        .condition {
          font-size: 24rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 33rpx;
          text-align: center;
          margin-top: 25rpx;
        }
        .exchangeName {
          display: none;
          font-size: 35rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 56rpx;
        }
      }
      > .right {
        width: 456rpx;
        height: 245rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 8rpx 0 5rpx 0;
        .title {
          height: 30rpx;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 33rpx;
          display: flex;
          .type {
            width: 113rpx;
            height: 30rpx;
            line-height: 30rpx;
            display: inline-block;
            background: #f8c;
            border-radius: 19rpx;
            font-size: 24rpx;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
          }
          .state {
            display: inline-block;
            margin-left: 20rpx;
            color: #7f7f7f;
            height: 33rpx;
            font-size: 24rpx;
            font-weight: 600;
            line-height: 33rpx;
          }
        }
        .content {
          display: flex;
          justify-content: space-between;
          margin: 5rpx 0 5rpx 0;
          height: 140rpx;

          .items {
            width: 330rpx;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            .item {
              color: #272626;
              font-size: 21rpx;
              line-height: 21rpx;
              > text {
                width: 230rpx;
                display: inline-block;
                color: #272626;
                font-size: 22rpx;
                font-weight: bold;
                white-space: nowrap; /* 文本不换行 */
              }
            }
            .from {
              display: none;
            }
          }
          > .btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 10rpx;
            > .button {
              height: 60rpx;
              background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
              border-radius: 20rpx;
              border: none;
              padding: 0 10rpx;
              outline: none;
              color: #ffffff;
              line-height: 60rpx;
              font-size: 30rpx;
              font-weight: 400;
              overflow: hidden; /* 超出部分隐藏 */
              white-space: nowrap; /* 文本不换行 */
            }
          }
        }
        .tip {
          margin-right: 20rpx;
          border-top: 2rpx dashed #d8d8d8;
          height: 49rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #7f7f7f;
          line-height: 23rpx;
          padding-top: 12rpx;
          box-sizing: border-box;
          overflow: scroll; /* 超出部分隐藏 */
          white-space: nowrap;
          /*  text-overflow: ellipsis;*/
        }
      }
    }
    .direct {
      > .left {
        background: url("../static/coupon/quan1.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #f8ce57;
        }
        > .content > .btn .button {
          background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
        }
      }
    }
    .rate {
      > .left {
        background: url("../static/coupon/quan2.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #eb8573;
        }
        > .content > .btn .button {
          background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
        }
      }
    }
    .exchange {
      > .left {
        background: url("../static/coupon/quan3.2x.png") no-repeat;
        background-size: 100% 100%;
        > .amount,
        > .condition {
          display: none;
        }
        > .exchangeName {
          display: inline-block;
          width: 150rpx;
          margin: 0 auto;
        }
      }
      > .right {
        > .title > .type {
          background: #19c79b;
        }
        > .content > .btn .button {
          background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
        }
      }
    }
    .expired {
      > .left {
        background: url("../static/coupon/quan4.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #bfbfbf;
        }
        > .content > .btn .button {
          display: none;
        }
      }
    }
  }
  > .bottom {
    margin-top: 80rpx;
    margin-bottom: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 32rpx;
    letter-spacing: 1px;
  }
}
</style>
